<!DOCTYPE html>
<head>
    <title>平台配置信息</title>
    <#include "/header.html">
    <link
            href="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.css"
            rel="stylesheet" />
</head>
<body>
<style>
    .bootstrap-select{
        width: 100% !important;
    }

</style>
<div class="layui-container " style="width: 100%;" id="indexModel">

    <div class="layui-row" style="margin-top: 10px;">
        <div class="layui-col-md2 ">
            <input type="text" id="usernames"  required  placeholder="请输入名称" autocomplete="off" class="form-control">
        </div>
        <div class="layui-col-md2 " style="padding-left: 20px;">
            <input type="text" id="accessKeyIds"  required  placeholder="请输入accessKeyId" autocomplete="off" class="form-control">
        </div>
        <div class="layui-col-md3 " style="padding-left: 20px;">
            <a class="btn btn-default" id="search">查询</a>
            <a class="btn btn-primary" style="margin-left: 10px;" id="btnadd"><i class="fa fa-plus"></i>&nbsp;新增</a>
        </div>
    </div>

    <div class="layui-row table-striped" style="margin-top: 10px;padding:0 0px;">
        <table id="bootstrap-table" data-mobile-responsive="true"></table>
    </div>

</div>

<div class="layui-container" style="width: 100%;display: none;margin-top: 20px;" id="addModel">
    <div class="layui-row" >
        <div class="layui-col-md12" >
            <div class="layui-form-item" style="width: 500px;">
                <label class="layui-form-label" style="width: 100px;">选择账号</label>
                <div class="layui-input-block" >
                    <select class="selectpicker" id="accountId" title="请选择账号"  style="width:100%;" >

                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" >
        <div class="layui-col-md12" >
            <div class="layui-form-item" style="width: 500px;">
                <label class="layui-form-label" style="width: 100px;">accessKeyId</label>
                <div class="layui-input-block" >
                    <input type="text" id="accessKeyId"  required  placeholder="请输入accessKeyId" autocomplete="off" class="form-control">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" >
        <div class="layui-col-md12" >
            <div class="layui-form-item" style="width: 500px;">
                <label class="layui-form-label" style="width: 100px;">secret</label>
                <div class="layui-input-block" >
                    <input type="text" id="secret"  required  placeholder="请输入secret" autocomplete="off" class="form-control">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" >
        <div class="layui-col-md12" >
            <div class="layui-form-item" style="width: 500px;">
                <label class="layui-form-label" style="width: 100px;">是否开启</label>
                <div class="layui-input-block" >
                    <input type="checkbox" class="checke"  id="isEffective">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" >
        <div class="layui-col-md6" style="padding-left: 20px;">
            <div class="layui-btn" id="btnconfirm">确定</div>
            <div class="layui-btn layui-btn-warm" id="btnreturn">返回</div>
        </div>
    </div>

</div>

<script>
    var _id = null;


    $(function(){



        $('#btnconfirm').click(function(){
            //确认保存
            if($('#accessKeyId').val()==''){
                layer.msg('accessKeyId不能为空')
                return;
            }

            if($('#secret').val()==''){
                layer.msg('secret不能为空')
                return;
            }


            var params = {
                accessKeyId: $('#accessKeyId').val(),
                secret:$('#secret').val(),
                accountId:$('#accountId').val(),
                isEffective:$('#isEffective').is(":checked")?1:0
            }
            var index = layer.load(2);
            if(_id){
                params.id = _id;
                $.ajax({
                    type: "post",
                    url: baseURL + "aliyunAccountAccess/updateAliyunAccountAccess",
                    data:JSON.stringify(params),
                    contentType:"application/json",
                    success: function (data) {
                        layer.close(index);
                        if(data.code==0){
                            layer.msg('修改成功');
                            $('#addModel').hide();
                            $('#indexModel').show();
                            $('#bootstrap-table').bootstrapTable('refresh');
                        }else{
                            layer.msg(data.msg);
                        }
                    }
                })
            }else{
                $.ajax({
                    type: "post",
                    url: baseURL + "aliyunAccountAccess/saveAliyunAccountAccess",
                    data:JSON.stringify(params),
                    contentType:"application/json",
                    success: function (data) {
                        layer.close(index);
                        if(data.code==0){
                            layer.msg('添加成功');
                            $('#addModel').hide();
                            $('#indexModel').show();
                            $('#bootstrap-table').bootstrapTable('refresh');
                        }else{
                            layer.msg(data.msg);
                        }
                    }
                })
            }

        })
        $('#btnreturn').click(function(){
            //返回列表
            $('#addModel').hide();
            $('#indexModel').show();
        })


        $('#btnadd').click(function(){
            _id = null;
            showadd()
        })

        $('#search').click(function(){
            $('#bootstrap-table').bootstrapTable('refresh');
        })
        init()
    })
    function edit(e){
        _id = e;
        showadd()
    }

    function remove(e){
        layer.confirm('确定要删除吗？', {icon: 3, title:'提示'}, function(index){
            $.ajax({
                type: "post",
                url: baseURL + "aliyunAccountAccess/delAliyunAccountAccess",
                contentType:"application/json",
                data:JSON.stringify({
                    id:e
                }),
                success: function (data) {
                    if(data.code==0){
                        $('#bootstrap-table').bootstrapTable('refresh');
                        layer.msg('删除成功！');
                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            })

            layer.close(index);
        });
    }

    function showadd(){
        $('#accessKeyId').val('');
        $('#secret').val('');
        $('#isEffective').prop('checked','checked')
        $('#accountId').selectpicker('refresh');
        var index = layer.load(2);
        $.ajax({
            type: "post",
            url: baseURL + "aliyunAccountInfo/findAliyunAccountInfoList",
            contentType: "application/json",
            success: function (data) {
                var _html = ''
                for(var i=0;i<data.result.length;i++){
                    _html = _html + '<option value="'+data.result[i].id+'">'+data.result[i].username+'</option>'
                }
                $('#accountId').html(_html);
                $('#accountId').selectpicker('refresh');

                if(_id){
                    $.ajax({
                        type: "post",
                        url: baseURL + "aliyunAccountAccess/getAliyunAccountAccess",
                        contentType:"application/json",
                        data:JSON.stringify({
                            id:_id
                        }),
                        success: function (data) {
                            layer.close(index);
                            if(data.code==0){
                                $('#accessKeyId').val(data.result.accessKeyId);
                                $('#secret').val(data.result.secret);
                                $('#accountId').selectpicker('val', data.result.accountId).trigger("change");
                                if(data.result.isEffective){
                                    $('#isEffective').prop('checked','checked')
                                }else{
                                    $('#isEffective').prop('checked',false)
                                }
                            }else{
                                layer.msg('数据获取失败');
                            }
                        }
                    })
                }else{
                    layer.close(index);
                }
            }

        })

        $('#addModel').show();
        $('#indexModel').hide();
    }
    function init(){
        $('#bootstrap-table')
            .bootstrapTable(
                {
                    method : 'post', // 服务器数据的请求方式 get or post
                    url : baseURL + 'aliyunAccountAccess/findAliyunAccountAccessPage', // 服务器数据的加载地址
                    showRefresh : true,
                    showToggle : true,
                    showColumns : true,
                    showExport :true,
                    sortable: true,
                    sortName:"userId",// 排序列名称
                    sortOrder: "desc",
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"
                    queryParams : function(params) {

                        return {
                            // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit : params.limit+'',
                            page : (params.offset/params.limit)+1+'',
                            accessKeyId:$('#accessKeyIds').val(),
                            username:$('#usernames').val()
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        // {
                        //     checkbox : true
                        // },
                        {
                            field : 'username',
                            title : '阿里云账号',
                            align : 'center'

                        },
                        {
                            field : 'accessKeyId',
                            title : 'accessKeyId',
                            align : 'center'
                        },
                        {
                            field : 'accessKeyNum',
                            title : '今日调用次数',
                            align : 'center',
                            formatter:function(value, row,index){
                                return value?value:0
                            }
                        },
                        {
                            field : 'secret',
                            title : '密钥',
                            align : 'center'
                        },
                        {
                            field : 'isEffective',
                            title : '是否启用',
                            align : 'center',
                            formatter : function(value, row,index) {
                                return value?'启用':'关闭'

                            }
                        },
                        {
                            field : 'createTime',
                            title : '创建时间',
                            align : 'center'
                        },
                        {
                            title : '操作',
                            field : 'id',
                            align : 'center',
                            formatter : function(value, row,index) {
                                var e = '<div style="margin-right: 10px;" class="btn btn-primary btn-sm " onclick="edit('+row.id+')"><i class="fa fa-edit" style="margin-right:5px;"></i>编辑</div>';
                                var d = '<div class="btn btn-warning btn-sm" onclick="remove('+row.id+')"><i class="fa fa-remove" style="margin-right:5px;"></i>删除</div>';
                                return e + d;

                            }
                        } ]
                });
    }

</script>
</body>
</html>